<template>
	<div class="container-div">
		<div class="app-container">
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form layout="inline">
						<div style="margin-top: 10px">
							<a-form-item label="岗位编码" prop="postCode">
								<a-input placeholder="请输入岗位编码" />
							</a-form-item>

							<a-form-item label="岗位名称" prop="postName">
								<a-input placeholder="请输入岗位名称" />
							</a-form-item>

							<a-form-item label="状态" prop="status">
								<a-select
									prop="status"
									show-search
									placeholder="岗位状态"
									option-filter-prop="children"
									style="width: 200px"
									:filter-option="filterOption"
									@focus="handleFocus"
									@blur="handleBlur"
									@change="handleChange"
								>
									<a-select-option value="正常"> 正常 </a-select-option>
									<a-select-option value="停用"> 停用 </a-select-option>
								</a-select>
							</a-form-item>

							<span>
								<a-button style="margin-top: 4px" @click="handleSearch" type="primary">搜索</a-button>
								<a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
							</span>
						</div>
					</a-form>
				</a-col>
				<!-- 按钮 -->
				<a-col :span="24">
					<div style="margin: 10px 0px; padding-left: 10px">
						<a-button type="primary" @click="showModal" width="800px" ghost>新增</a-button>
						<a-modal v-model="visible" width="640px" title="添加岗位" @ok="handleOk">
							<CreateForm></CreateForm>
						</a-modal>
						<a-button type="primary" ghost style="margin-left: 10px">修改</a-button>
						<a-button type="danger" @click="batchDelete" ghost style="margin-left: 10px">删除</a-button>
						<a-button type="primary" ghost style="margin-left: 10px">导入</a-button>
						<a-button type="primary" ghost style="margin-left: 10px">导出</a-button>
					</div>
				</a-col>
				<a-col :span="24">
					<a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
						<a-col :gutter="8" :span="24">
							<a-form-item label="创建时间">
								<!--  @change="onChange" -->
								<a-range-picker @change="rangePicker" />
							</a-form-item>
						</a-col>
						<!-- <a slot="name" slot-scope="text">{{ text }}</a>
						<span slot="status" slot-scope="text, record">
							<a-popconfirm ok-text="是" cancel-text="否" @confirm="confirmHandleStatus(record)" @cancel="cancelHandleStatus(record)">
								<span slot="title"
									>确认<b>{{ record.status === '1' ? '启用' : '停用' }}</b
									>名称为:{{ record.nickName }}的用户吗?</span
								>
								<a-switch checked-children="开" un-checked-children="关" :checked="record.status == 0" />
							</a-popconfirm>
						</span> -->
						<a slot="name" slot-scope="text">{{ text }}</a>
						<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
						<span slot="status" slot-scope="status">
							<a-tag v-for="status in status" :key="status" :color="status === 'loser' ? 'volcano' : status.length > 5 ? 'geekblue' : 'blue'">
								{{ status.toUpperCase() }}
							</a-tag>
						</span>
						<span slot="action" slot-scope="text, record">
							<a @click="showModal">修改</a>
							<a-divider type="vertical" />
							<a @click="handleDelete(record)">删除</a>
							<a-divider type="vertical" />
						</span>
					</a-table>
				</a-col>
			</a-row>
		</div>
	</div>
</template>

<script>
import CreateForm from './components/CreateForm.vue';

const columns = [
	{
		title: '岗位编号',
		align: 'center',
		dataIndex: 'postId',
		scopedSlots: { customRender: 'postId' },
	},
	{
		title: '岗位编码',
		align: 'center',
		dataIndex: 'postCode',
	},
	{
		title: '岗位名称',
		align: 'center',
		dataIndex: 'postName',
	},
	{
		title: '岗位排序',
		align: 'center',
		dataIndex: 'postSort',
	},

	{
		title: '状态',
		align: 'center',
		key: 'status',
		dataIndex: 'status',
		scopedSlots: { customRender: 'status' },
	},
	{
		title: '创建时间',
		align: 'center',
		width: '150',
		dataIndex: 'createTime',
	},
	{
		title: '操作',
		align: 'center',
		width: '150',
		dataIndex: 'action',
		scopedSlots: { customRender: 'action' },
	},
];
const data = [
	{
		key: '1',
		postId: '1',
		postCode: 'ceo',
		postName: '董事长',
		postSort: '1',
		status: ['正常'],
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
	{
		key: '2',
		postId: '1',
		postCode: 'ceo',
		postName: '董事长',
		postSort: '1',
		status: ['正常'],
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
	{
		key: '3',
		postId: '1',
		postCode: 'ceo',
		postName: '董事长',
		postSort: '1',
		status: ['正常'],
		createTime: '2022-03-02 12:23:23',
		action: '',
	},
	// {
	// 	key: '4',
	// 	name: 'Disabled User',
	// 	age: 99,
	// 	address: 'Sidney No. 1 Lake Park',
	// },
];
const rowSelection = {
	onChange: (selectedRowKeys, selectedRows) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	onSelect: (record, selected, selectedRows) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
		console.log(selected, selectedRows, changeRows);
	},
};
export default {
	data() {
		return {
			components: {
				CreateForm,
			},
			visible: false,
			expandedKeys: ['0-0-0', '0-0-1'],
			data,
			columns,
			rowSelection,
			expandedRowKeys: [],
			// 筛选日期
			dateRange: [],
		};
	},
	computed: {},
	methods: {
		// 状态选择
		handleChange(value) {
			console.log(`selected ${value}`);
		},
		handleBlur() {
			console.log('blur');
		},
		handleFocus() {
			console.log('focus');
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		// 搜索按钮
		async handleSearch() {
			console.log('sousuo');
		},
		// 重置
		handleReset() {
			console.log('reset');
			this.dateRange = [];
			// 	this.queryParams = {
			// 		pageNum: 1,
			// 		pageSize: 10,
			// 		roleName: undefined,
			// 		roleKey: undefined,
			// 		status: undefined,
			// 	};
			// 	this.handleReset();
		},
		// 新增按钮显示
		showModal() {
			this.visible = true;
		},
		// 新增编辑
		handleOk(e) {
			console.log(e);
			this.visible = false;
		},
		onContextMenuClick(treeKey, menuKey) {
			console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
		},
		// 搜索框中的日期选择
		rangePicker(date, dateString) {
			this.dateRange = dateString;
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			console.log('shanchuyilie');
			const postId = row.postId;
			const that = this;
			this.$confirm({
				title: '警告',
				content: `真的要删除岗位编号为${postId}的数据项吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				// onOk() {
				// 	delConfig(configId).then((response) => {
				// 		if (response.code === 200) {
				// 			that.$message.success('删除成功!');
				// 			that.getList();
				// 		} else {
				// 			that.$message.error(response.msg);
				// 		}
				// 	});
				// },
			});
		},
		batchDelete(ids) {
			console.log('shanchu');
			const that = this;
			this.$confirm({
				title: '系统提示',
				content: `是否确认删除编号用户为  ${ids.length} 位用户吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				onOk() {},
			});
		},
		/* 任务状态修改 */
		confirmHandleStatus() {
			console.log(23343);
			// 		row.status = row.status === '0' ? '1' : '0';
			// 		const text = row.status === '0' ? '启用' : '停用';
			// 		changeUserStatus(row.userId, row.status);
			// 			.then(() => {
			// 				this.$message.success(text + '成功', 3);
			// 			})
			// 			.catch(function () {
			// 				this.$message.error(text + '发生异常', 3);
			// 			});
		},
		cancelHandleStatus() {
			console.log('sudishfcd');
		},
	},
	components: { CreateForm },
};
</script>
<style scoped lang="scss">
.container-div {
	width: 100%;
}
.app-container {
	padding: 20px;
}
</style>
